<template>
  <div class="container">
    <h1>Todo List</h1>

    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add new todo" />
    <button @click="addTodo">Add</button><br><br>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed"   />
        <label :class="{ 'completed': todo.completed }">{{ todo.item }}</label>
        <button @click="removeTodo(todo)">X</button>
      </li>
      <button @click="deleteSelected">Delete the selected item</button>
    </ul>

    <br><br>

    <!--  搜索 过滤 功能  -->
    <input v-model="searchQuery" placeholder="Search todos" /><br><br>
    <ul>
      <li v-for="todo in filteredTodos" :key="todo.id">
        {{ todo.item }}
        <button @click="removeTodo(todo)">x</button>
      </li>
    </ul>

    <button @click="clearTodos">Clear All</button><br><br>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';

let id = 0;
const todos = ref([]);
const newTodo = ref("");




// 过滤处理 搜索效果实现
// 在 <script setup> 部分，定义一个 searchQuery 变量来存储搜索关键字：
const searchQuery = ref("");
// 使用 computed 定义一个计算属性 filteredTodos，
// 根据搜索关键字过滤待办事项列表：
const filteredTodos = computed(() => {
  // searchQuery.value 获取搜索输入框的当前值。  去除搜索关键字前后的空格。这是为了避免用户在输入关键字时不小心输入的额外空格影响搜索结果。
  const query = searchQuery.value.toLowerCase().trim();
  // if (!query) 检查 query 是否为空字符串。这意味着如果用户没有输入任何内容，
  // 或者输入的内容全是空格，query 将是一个空字符串。
  if (!query) {
    return [];   // 如果搜索关键字为空，则返回一个空数组：
  }
  // 如果搜索框中有输入内容，则根据输入的关键字实时过滤并显示匹配的待办事项
  return todos.value.filter(todo => todo.item.toLowerCase().includes(query)); // 返回的是一个经过过滤后的数组
  // query 是用户输入的搜索关键字，经过小写化和去除空格处理。
});




const addTodo = () => {
  // Trim the input value and check if it's empty
  const trimmedTodo = newTodo.value.trim();
  if (trimmedTodo === '') {
    alert('Todo cannot be empty or just spaces!');
    return;
  }

  if (trimmedTodo.length > 15) {
    alert('Todo item cannot too long  ');
    return;
  }


  // 检查是否重复
  // some 方法会遍历数组，并在找到第一个匹配的元素时返回 true
  const isDuplicate = todos.value.some(todo => todo.item === newTodo.value);
  if (isDuplicate) {
    alert('This todo already exists!');
    return;
  }

  let todoObj = {
    id: id++,
    item: newTodo.value,
  };
  todos.value.push(todoObj);
  newTodo.value = ''; // Clear input 
};

// todos.value = todos.value.filter((td) => td !== todo)：
// 使用数组的 filter 方法创建一个新的数组，
// 只包含那些不等于 todo 的待办事项，从而实现删除操作。
// 然后将过滤后的新数组赋值给 todos.value，以更新待办事项列表。
const removeTodo = (todo) => {
  todos.value = todos.value.filter((td) => td !== todo)
};







// Define clearTodos function
const clearTodos = () => {
  todos.value = []; // Clear all todos
};



const deleteSelected = () => {
  todos.value = todos.value.filter(todo => !todo.completed);
};




</script>
<style>
.completed {
  text-decoration: line-through;
}



body,
h1,
ul,
li,
input,
button {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #333030;
  margin-top: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

input,
button {
  font-size: 32px;
  padding: 12px;
}

input[type=checkbox] {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.container {
  background: #b1afaf;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  align-items: center;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.form {
  display: flex;
}

ul {
  list-style-type: none;
}

li {
  padding: 10px;
  border: 3px solid #ddd;
  font-size: 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



li label {
  flex: 1;
}

li button {
  border: none;
  color: #c9302c;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
}

li button:hover {
  background: #c9302c;
  color: #ddd
}
</style>